<template>
  <div class="full-page-3">
    <el-image :src="png1" fit="cover" class="absolute bottom-0 left-1/4" :class="{'enter':active,'leave':!active}"></el-image>
    <el-image :src="png2" fit="cover" class="absolute bottom-1/4 left-72 scale-50  lg:scale-100" :class="{'enter':active,'leave':!active}"></el-image>
    <el-image :src="png3" fit="cover" class="absolute bottom-2/4 left-52 scale-50 lg:scale-100" :class="{'enter':active,'leave':!active}"></el-image>
    <el-image :src="png4" fit="cover" class="absolute bottom-3/4 left-32 scale-50  lg:scale-100" :class="{'enter':active,'leave':!active}"></el-image>
    <el-image :src="png5" fit="cover" class="absolute bottom-1/4 w-28 left-16 scale-50 lg:scale-100 " :class="{'enter':active,'leave':!active}"></el-image>
    <div class="full-page-3-text">
      <div :class="{'enter':active,'leave':!active}">
        <h2>{{ t('page3.title.c1') }}</h2>
        <p>{{ t('page3.content.c1') }}</p>
      </div>
      <div :class="{'enter':active,'leave':!active}">
        <h2>{{ t('page3.title.c2') }}</h2>
        <p>{{ t('page3.content.c2') }}</p>
      </div>
      <div :class="{'enter':active,'leave':!active}">
        <h2>{{ t('page3.title.c3') }}</h2>
        <p>{{ t('page3.content.c3') }}</p>
      </div>
      <div :class="{'enter':active,'leave':!active}">
        <h2>{{ t('page3.title.c4') }}</h2>
        <p>{{ t('page3.content.c4') }}</p>
      </div>
      <div :class="{'enter':active,'leave':!active}">
        <h2>{{ t('page3.title.c5') }}</h2>
        <p>{{ t('page3.content.c5') }}</p>
      </div>
    </div>
    <el-image class="bg-image" :src="bg" fit="cover"></el-image>
  </div>
</template>
<script setup name="fullPage3">
const { t } = useI18n();
const bg = useAssets('images/png/section8.jpg');
const png1 = useAssets('images/png/bg81.png');
const png2 = useAssets('images/png/bg82.png');
const png3 = useAssets('images/png/bg83.png');
const png4 = useAssets('images/png/bg84.png');
const png5 = useAssets('images/png/java.png');

const props = defineProps({
  index: {
    type: Number,
    default: 0
  }
});

const active = computed(() => props.index === 2);

</script>
<style lang="scss" scoped>
.full-page-3 {
  @for $i from 1 through 5 {
    .el-image.enter:nth-child(#{$i}){
      @if $i == 1 {
        animation: fadeInUp 1.5s  ease-in-out;
      }
      @if $i > 1 {
        animation:fadeInBottomLeft  1.5s  $i*0.06s ease-in-out ;
      }
    }
    .el-image.leave:nth-child(#{$i}){
      @if $i == 1 {
        animation: fadeOutDown .8s  ease-in-out;
      }
      @if $i > 1 {
        animation:fadeOutBottomLeft  .8s  ease-in-out ;
      }
    }
  }
  &-text {
    &>div {
      @apply font-sans text-left text-blue-400 absolute flex text-xs lg:text-base;
      h2{
        @apply uppercase break-words break-all overflow-hidden w-3 font-bold  lg:text-2xl md:w-8;
      }
      p{
        @apply whitespace-pre-wrap text-blue-300 p-1 ml-2;
      }
      @for $i from 1 through 5 {
          &:nth-child(#{$i}){
            right: $i*10%;
            top: $i*13% ;
            &.enter {
              animation:bounceInUp 2s .2s;
            }
            &.leave {
              animation: bounceOutDown .8s;
            }
          }
      }
    }
  }
}
</style>
